<template>
    <div class="CompontensViews">
        <div class="scroo">

            <ux-grid class="ux-table" ref="singleTable" :data="Data" :header-cell-style="{
                color: 'rgba(0, 0, 0, 0.85)',
                fontSize: '14px',
                textAlign: 'left',
                fontWeight: 'bold',
                padding: 0,
                height: '32px',
                background: 'rgb(244,245,246)'
            }" :cell-style="{
                color: 'rgba(96,98,102,1)',
                fontSize: '14px',
                textAlign: 'left',
                padding: 0,
                height: '32px',
            }" :checkbox-config="{
                showHeader: false,
            }" @current-change="handleCurrentChange" highlight-current-row element-loading-spinner="el-icon-loading"
                element-loading-background="#f8f8f8" :element-loading-text="$t('message.bhView.loading')">
                <template slot="empty"> No data </template>

                <ux-table-column property="label" title=" " width="50" align="center">
                    <template slot-scope="scope">
                        <p style="text-align: center;">{{ scope.row.id }}</p>
                    </template>
                </ux-table-column>
                <ux-table-column property="label" title=" " width="50" align="center">
                    <template slot-scope="scope">
                        <p style="text-align: center;">{{ scope.row.dispNo }}</p>
                    </template>
                </ux-table-column>
                <ux-table-column property="label" title="損傷分類" width="190" align="center">
                    <template slot-scope="scope">
                        <el-input readonly class="table-input center" v-model="scope.row.dmgClsName"></el-input>
                    </template>
                </ux-table-column>
                <ux-table-column property="label" title="損傷名称" width="190" align="center">
                    <template slot-scope="scope">
                        <el-input readonly class="table-input center" v-model="scope.row.dmgName"></el-input>
                    </template>
                </ux-table-column>
                <ux-table-column property="label" title="材質分類" width="190" align="center">
                    <template slot-scope="scope">
                        <el-input readonly class="table-input center" v-model="scope.row.mtrCls"></el-input>
                    </template>
                </ux-table-column>
                <ux-table-column property="label" :title="Label[3].dataVal" width="315">

                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" :content="scope.row.machanism" placement="top-start">
                            <el-input readonly class="table-input" v-model="scope.row.machanism"></el-input>
                        </el-tooltip>
                    </template>
                </ux-table-column>
            </ux-grid>

            <div class="tips">
                <span>*印の損傷は「損傷発生条件表」から削除されました。</span>
                <div>
                    <el-button type="default" size="mini" @click="GetSpecifiedValueFn">規定値に戻す</el-button>
                </div>
            </div>

            <div class="row1">
                <div class="label">{{ Label[3].dataVal }}</div>
                <div class="iptAreaBox">
                    <el-input type="textarea" resize="none" :disabled="Data.length == 0" :rows="5"
                        v-model="handleRow.machanism" class="iptarea"
                        @input="handleRow.machanism = $setMaxLength(handleRow.machanism, 500)"></el-input>
                </div>
            </div>
            <div class="row1">
                <div class="label">{{ Label[4].dataVal }}</div>
                <div class="iptAreaBox">
                    <el-input type="textarea" resize="none" :disabled="Data.length == 0" :rows="4"
                        v-model="handleRow.expPart" class="iptarea"
                        @input="handleRow.expPart = $setMaxLength(handleRow.expPart, 500)"></el-input>
                </div>
            </div>
            <div class="row1">
                <div class="label">{{ Label[5].dataVal }}</div>
                <div class="iptAreaBox">
                    <el-input type="textarea" resize="none" :disabled="Data.length == 0" :rows="4"
                        v-model="handleRow.ispWayName" class="iptarea"
                        @input="handleRow.ispWayName = $setMaxLength(handleRow.ispWayName, 500)"></el-input>
                </div>
            </div>
            <div class="row1">
                <div class="label">{{ Label[6].dataVal }}</div>
                <div class="iptAreaBox">
                    <el-input type="textarea" resize="none" :disabled="Data.length == 0" :rows="4"
                        v-model="handleRow.exaFact" class="iptarea"
                        @input="handleRow.exaFact = $setMaxLength(handleRow.exaFact, 500)"></el-input>
                </div>
            </div>
        </div>

        <tab2_diago :PltCode="PltCode" :Code="Code" v-if="isShowDiago" @hidden="isShowDiago = false"
            @getAddRow="getAddRow" :Label="Label" :DamList="Data">
        </tab2_diago>
    </div>
</template>

<script>
import { GetCauseOfInjury, GetSpecifiedValue, GetSysIntelligenceMsg, DelCauseOfInjury } from "@/api/api";
import eventBus from "@/eventBus/bus";
import { showLoading, hideLoading } from "@/utils/loading";
import tab2_diago from "./tab2_diago.vue";

import _ from 'lodash-es';

export default {
    name: "BasicStyleCompontens",
    props: ["PltCode", "Code", "Label", "leftCodName"],
    data() {
        return {
            tabs_list: [
                { title: "系統情報", },
                { title: "損傷要因", },
                { title: "関連図書", },
            ],
            activeFlag: 0,
            prposTabelData: [],
            Data: [],
            DataClone: [],
            handleRow: {
                machanism: null,
                expPart: null,
                ispWayName: null,
                exaFact: null,
                id: 0
            },
            isShowDiago: false,
            tempIndex: 0
        };
    },
    components: {
        tab2_diago
    },
    watch: {
        PltCode: {
            handler(newName, oldName) {
                this.GetSysIntelligenceFn();
            },
            immediate: true,
            deep: true,
        },
        Code: {
            handler(newName, oldName) {
                console.log(newName);
                this.GetSysIntelligenceFn();
            },
            immediate: true,
            deep: true,
        },
        Data: {
            handler(newName, oldName) {
                this.$emit('isChangeFlgFn', _.isEqual(this.Data, this.DataClone))
            },
            immediate: true,
            deep: true,
        },
    },
    computed: {

    },
    methods: {
        addFn() {
            // let item = {
            //     "dispNo": "",
            //     "dmgClsName": "",
            //     "dmgName": "",
            //     "mtrCls": "",
            //     "machanism": "",
            //     "expPart": "",
            //     "ispWayName": "",
            //     "exaFact": "",
            //     "code": this.Code,
            //     "id": this.Data.length == 0 ? 1 : Number(this.Data[this.Data.length - 1].id) + 1,
            //     "damClsCode": 0,
            //     "damNameCode": 0,
            //     "mtrClsCode": 0
            // };

            // this.Data.push(item);
            // this.$refs.singleTable.setCurrentRow(item);
            // setTimeout(() => {
            //     this.$refs.singleTable.pagingScrollTopLeft(99999);
            // }, 300);
            this.isShowDiago = true;
        },
        getAddRow(row) {
            row.id = this.Data.length == 0 ? 1 : Number(this.Data[this.Data.length - 1].id) + 1;
            row.insert = 1;
            this.Data.push(row);
            this.$refs.singleTable.setCurrentRow(row);
            this.handleRow = row;
            setTimeout(() => {
                this.$refs.singleTable.pagingScrollTopLeft(99999);
            }, 300);
        },
        async delFn() {
            // let tips = await this.GetSysIntelligenceMsgFn();
            // this.$confirm(tips, '', {
            //     confirmButtonText: this.$t("message.public.confirm"),
            //     cancelButtonText: this.$t("message.public.cancel"),
            //     type: "warning",
            // })
            //     .then(() => {

            let dataJson = {
                PltCode: this.PltCode || this.$store.state.pltCode,
                Code: this.Code || -1,
                DamCode: this.handleRow.id,
                MacNumb: this.leftCodName
            };
            let res = await DelCauseOfInjury(dataJson);
            if (!res) {
                return
            }
            // res.data.code = 311;
            if (res.data.code == 311) {
                this.$alert(res.data.msg, {
                    confirmButtonText: 'OK',
                    type: 'warning',
                    callback: action => {
                    }
                })
            }

            var temp = 0;
            this.Data = this.Data.filter((item, index) => {
                if (item.id == this.handleRow.id) {
                    console.log(item);
                    temp = index != 0 ? index - 1 : 0;
                }
                return item.id != this.handleRow.id
            })
            if (this.Data.length == 0) {
                this.handleRow = {};
                return
            }
            this.handleRow = this.Data[temp];
            this.$refs.singleTable.setCurrentRow(this.Data[temp]);
            setTimeout(() => {
                this.$refs.singleTable.pagingScrollTopLeft(temp * 32);
            }, 300);
            // })
            // .catch(() => { });
        },
        //  获取提示信息
        async GetSysIntelligenceMsgFn() {
            let dataJson = {
                PltCode: this.PltCode,
                MacName: this.handleRow.dmgName,
                type: 3
            };
            let res = await GetSysIntelligenceMsg(dataJson);
            return res.data.msg;
        },
        handleCurrentChange(val) {
            console.log(val)
            this.handleRow = val;
            this.tempIndex = val.id - 1;
        },
        async GetSysIntelligenceFn() {
            this.Data = [];
            this.DataClone = [];
            this.handleRow = {};
            let dataJson = {
                PltCode: this.PltCode || this.$store.state.pltCode,
                Code: this.Code || -1,
            };
            if (dataJson.Code == -1) {
                return
            }
            let res = await GetCauseOfInjury(dataJson);
            if (res.data.code != 0) {
                // this.Data = [];
                // this.DataClone = [];
                // this.handleRow = {};
                return
            }
            //  如果已经有选中的，则属于编辑状态，重新获取时，理论还在，则选中当前编辑行
            res.data.data.forEach((item, index) => {
                item.id = index + 1;
            })

            this.Data = _.cloneDeep(res.data.data);
            this.DataClone = _.cloneDeep(res.data.data);
            this.handleRow = this.Data[0];
            this.$refs.singleTable.setCurrentRow(this.handleRow);
        },
        async GetSpecifiedValueFn() {
            let res = await GetSpecifiedValue(this.handleRow);
            if (res.data.code != 0) {
                this.handleRow.machanism = '';
                this.handleRow.expPart = '';
                this.handleRow.ispWayName = '';
                this.handleRow.exaFact = '';
                return
            }
            Object.assign(this.handleRow, res.data.data);
        }
    },

    created() {
    },
    mounted() {
    },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.CompontensViews {
    max-width: 71.2%;
    max-height: 93.7%;
    position: relative;
    overflow: scroll;
    border: 1px solid #ccc;

    // &::-webkit-scrollbar {
    //     width: 0;
    // }


    .scroo {
        width: 1020px;
        padding: 16px 6px 0 16px;

        .row {
            margin-top: 8px;
            display: flex;
            align-items: center;

            .label {
                width: 100px;
                min-width: 100px;
                max-width: 100px;
                padding-right: 3px;
            }

            .iptbox {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                >.ipt:nth-child(1) {
                    width: 37%;
                    height: 32px;

                    ::v-deep .el-input__inner {
                        width: 100%;
                        height: 32px;
                    }
                }

                >.ipt:nth-child(2) {
                    width: 50%;
                    height: 32px;

                    ::v-deep .el-input__inner {
                        width: 100%;
                        height: 32px;
                    }
                }

                >.ipt:nth-child(3) {
                    width: 10%;
                    height: 32px;

                    ::v-deep .el-input__inner {
                        width: 100%;
                        height: 32px;
                    }
                }
            }



            .orange {
                ::v-deep .el-input__inner {
                    background-color: #FEDDB1;
                }
            }
        }

        .row1 {
            margin-top: 8px;
            display: flex;

            .label {
                width: 100px;
                min-width: 100px;
                max-width: 100px;
                padding-right: 3px;
            }

            .iptAreaBox {
                width: 872px;

                ::v-deep .el-textarea__inner {
                    width: 100%;
                }
            }
        }
    }

    .tips {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0 0 0;
        font-weight: 700;
        padding-right: 26px;
    }


    .table-input {
        ::v-deep .el-input__inner {
            background: none;
            border: 0 none;
            padding: 0;
            height: 32px;
        }
    }

    .center {
        ::v-deep .el-input__inner {
            text-align: center;
        }
    }

    .ux-table {
        ::v-deep .elx-table--body-wrapper {
            height: 133px !important;
        }

        ::v-deep .elx-table--empty-placeholder {
            // margin-top: 30px;
            height: 100% !important;
        }
    }

}
</style>
